import React from 'react';
import { List } from 'antd';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { IFlattenedItem } from '../store/listStore';
// import { getRandomColor } from '../utils'
import "./index.css";

// 导出一个默认的函数组件，名为SortableItem
export default function SortableItem(props: { item: IFlattenedItem }) {
  // 从props中解构出item
  const { item } = props
  // 从item中解构出ancestorIds
  const { ancestorIds } = item
  // 获取ancestorIds的长度，如果没有则默认为0
  const ancestorIdsLength = item.ancestorIds?.length || 0

  // 使用useSortable钩子，传入id和data
  const { attributes, listeners, setNodeRef, transform, transition } =
    useSortable({ id: item.id, data: { ancestorIds } })

  // 定义style对象
  const style = {
    // transform属性，将transform转换为字符串
    transform: CSS.Transform.toString(transform),
    // transition属性
    transition,
    // border属性
    border: '1px solid #ccc',
    // padding属性
    padding: '0 8px',
    // margin属性
    margin: '8px 4px',
    // background属性
    background: 'white',
    // boxShadow属性
    boxShadow: '0 1px 1px rgba(0,0,0,0.1)',
    // borderRadius属性
    borderRadius: '8px',
    // color属性，使用getRandomColor函数获取随机颜色
    // color: getRandomColor(item.id),
  }

  // 返回一个div元素，ref属性为setNodeRef，style属性为style，attributes和listeners属性为attributes和listeners
  return (
    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
      {/* List.Item.Meta组件，className属性为draggable-item，style属性为marginLeft，title属性为item.title，description属性为item.description */}
      <List.Item.Meta
        className="draggable-item"
        style={{ marginLeft: `${ancestorIdsLength * 20}px` }}
        title={item.title}
        description={item.description}
      />
    </div>
)
};
